<template>
  <div class="qualityteam-container">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleTabClick" :tab-position="tabPosition">
      <el-tab-pane label="主体指标完成情况" name="main">
        <!-- <onecolda ref="onecoldaRef"  /> -->
        <!-- 顶部标题 -->
        <el-row justify="center" class="header-row">
          <el-col :span="24" class="title">三冷运营区域质量日报</el-col>
        </el-row>
        <!-- 主体指标完成情况 表格 -->
        <el-row :gutter="16" class="main-tables" v-if="activeName === 'main'">
          <el-col :span="24">
            <el-card shadow="hover" class="stat-card">
              <div class="card-title">主体指标完成情况</div>
              <!-- 时间筛选 -->
              <div class="filter-section">
                <el-date-picker
                  v-model="dateRange"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  @change="handleDateChange"
                  class="date-picker"
                />
                <el-button type="primary" @click="handleMainTargetQuery" :loading="tableLoading"> 查询 </el-button>
              </div>
              <el-table :data="mainTargetData" border size="small">
                <el-table-column prop="unit" label="单元" align="center" />
                <el-table-column prop="belong" label="归户" align="center" />
                <el-table-column label="原品种一次合格率（%）" align="center">
                  <el-table-column prop="yuanpin0" label="目标" align="center">
                    <template #default="{ row }">
                      {{ formatTargetIndicator(row.yuanpin0) }}
                    </template>
                  </el-table-column>
                  <el-table-column label="当日" align="center">
                    <el-table-column prop="yuanpin1" label="指标" width="70" align="center">
                      <template #default="{ row }">
                        {{ formatTargetIndicator(row.yuanpin1) }}
                      </template>
                    </el-table-column>
                    <el-table-column prop="yuanpin2" label="超降" width="70" align="center">
                      <template #default="{ row }">
                        {{ formatTargetIndicator(row.yuanpin2) }}
                      </template>
                    </el-table-column>
                  </el-table-column>
                  <el-table-column label="月累" align="center">
                    <el-table-column prop="yuanpin3" label="指标" width="70" align="center">
                      <template #default="{ row }">
                        {{ formatTargetIndicator(row.yuanpin3) }}
                      </template>
                    </el-table-column>
                    <el-table-column prop="yuanpin4" label="超降" width="70" align="center">
                      <template #default="{ row }">
                        {{ formatTargetIndicator(row.yuanpin4) }}
                      </template>
                    </el-table-column>
                  </el-table-column>
                </el-table-column>

                <el-table-column label="废次降率（%）" align="center">
                  <el-table-column prop="feici0" label="目标" align="center">
                    <template #default="{ row }">
                      {{ formatTargetIndicator(row.feici0) }}
                    </template>
                  </el-table-column>
                  <el-table-column label="当日" align="center">
                    <el-table-column prop="feici1" label="指标" width="70" align="center">
                      <template #default="{ row }">
                        {{ formatTargetIndicator(row.feici1) }}
                      </template>
                    </el-table-column>
                    <el-table-column prop="feici2" label="超降" width="70" align="center">
                      <template #default="{ row }">
                        {{ formatTargetIndicator(row.feici2) }}
                      </template>
                    </el-table-column>
                    <el-table-column prop="feici3" label="废次降量（吨）" width="110" align="center">
                      <template #default="{ row }">
                        {{ formatOverReduction(row.feici3) }}
                      </template>
                    </el-table-column>
                  </el-table-column>
                  <el-table-column label="月累" align="center">
                    <el-table-column prop="feici4" label="指标" width="70" align="center">
                      <template #default="{ row }">
                        {{ formatTargetIndicator(row.feici4) }}
                      </template>
                    </el-table-column>
                    <el-table-column prop="feici5" label="超降" width="70" align="center">
                      <template #default="{ row }">
                        {{ formatTargetIndicator(row.feici5) }}
                      </template>
                    </el-table-column>
                    <el-table-column prop="feici6" label="废次降量（吨）" width="110" align="center">
                      <template #default="{ row }">
                        {{ formatOverReduction(row.feici6) }}
                      </template>
                    </el-table-column>
                  </el-table-column>
                </el-table-column>

                <el-table-column label="封闭返工（吨）" align="center">
                  <el-table-column prop="fengbi0" label="目标" width="70" align="center">
                    <template #default="{ row }">
                      {{ formatOverReduction(row.fengbi0) }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="fengbi1" label="当日" width="70" align="center">
                    <template #default="{ row }">
                      {{ formatOverReduction(row.fengbi1) }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="fengbi2" label="目标" width="70" align="center">
                    <template #default="{ row }">
                      {{ formatOverReduction(row.fengbi2) }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="fengbi3" label="月累" width="70" align="center">
                    <template #default="{ row }">
                      {{ formatOverReduction(row.fengbi3) }}
                    </template>
                  </el-table-column>
                </el-table-column>
              </el-table>
            </el-card>
          </el-col>
        </el-row>

        <!-- 主体指标完成情况 折线图 -->
        <el-row :gutter="16" class="sub-tables" v-if="activeName === 'main'">
          <!-- 原品种一次合格率趋势（%）各个单元 -->
          <el-col :span="8">
            <el-card class="tcm1-right-mid-card2" shadow="hover">
              <div style="width: 100%; height: 100%">
                <graph-line
                  :data1="tcmELCCPKData1"
                  :datax="tcmELCCPKDatax"
                  :data-name="tcmELCCPKDataName1"
                  :title="'原品种一次合格率趋势（%）各个单元'"
                  :show-bar="false"
                />
              </div>
            </el-card>
          </el-col>

          <el-col :span="8">
            <el-card class="tcm1-right-mid-card2" shadow="hover">
              <div style="width: 100%; height: 100%">
                <graph-line
                  :data1="tcmELCCPKData2"
                  :datax="tcmELCCPKDataFx"
                  :data-name="tcmELCCPKDataName2"
                  :title="'废次降率趋势（%）各个单元'"
                  :show-bar="false"
                />
              </div>
            </el-card>
          </el-col>

          <el-col :span="8">
            <el-card class="tcm1-right-mid-card2" shadow="hover">
              <div style="width: 100%; height: 100%">
                <graph-line
                  :data1="tcmELCCPKData3"
                  :datax="tcmELCCPKDatax"
                  :data-name="tcmELCCPKDataName2"
                  :title="'封闭趋势（吨）各个单元'"
                  :show-bar="false"
                />
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="质量问题情况" name="quality">
        <!-- <onecoldb ref="onecoldbRef" v-if="activeName === 'quality'" /> -->
        <!-- 顶部标题 -->
        <el-row justify="center" class="header-row">
          <el-col :span="24" class="title">三冷运营区域质量日报</el-col>
        </el-row>
        <!-- 质量问题情况 表格 -->
        <el-row :gutter="16" class="main-tables" v-if="activeName === 'quality'">
          <el-col :span="24">
            <el-card shadow="hover" class="stat-card">
              <div class="card-title">质量问题情况</div>
              <!-- 时间筛选 -->
              <div class="filter-section">
                <el-date-picker
                  v-model="qualityDateRange"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  @change="handleQualityDateChange"
                  class="date-picker"
                />
                <el-button type="primary" @click="fetchTableData" :loading="tableLoading"> 查询 </el-button>
              </div>
              <el-table :data="mainTargetData_quality" border size="small" v-loading="tableLoading">
                <el-table-column prop="unit" label="单元" align="center" />
                <el-table-column prop="belong" label="归户" align="center" />
                <el-table-column label="一级" align="center">
                  <el-table-column prop="col0" label="当日" align="center" />
                  <el-table-column prop="col00" label="累计" align="center" />
                </el-table-column>
                <el-table-column label="二级" align="center">
                  <el-table-column prop="col1" label="当日" align="center" />
                  <el-table-column prop="col11" label="累计" align="center" />
                </el-table-column>
                <el-table-column label="三级" align="center">
                  <el-table-column prop="col2" label="当日" align="center" />
                  <el-table-column prop="col22" label="累计" align="center" />
                </el-table-column>
                <el-table-column label="公司一级" align="center">
                  <el-table-column prop="col3" label="当日" align="center" />
                  <el-table-column prop="col33" label="累计" align="center" />
                </el-table-column>
                <el-table-column label="公司二级" align="center">
                  <el-table-column prop="col4" label="当日" align="center" />
                  <el-table-column prop="col44" label="累计" align="center" />
                </el-table-column>
                <el-table-column label="公司三级及以上" align="center">
                  <el-table-column prop="col5" label="当日" align="center" />
                  <el-table-column prop="col55" label="累计" align="center" />
                </el-table-column>
              </el-table>
            </el-card>
          </el-col>
        </el-row>

        <!--质量问题情况 柱状图 -->
        <el-row :gutter="16" class="sub-tables" v-if="activeName === 'quality'">
          <el-col :span="8">
            <el-card shadow="hover" class="stat-card">
              <div class="tcm1-mid-mid-card2-graph common-div-card">
                <graph-bar-other
                  :data1="qualitytDataA1"
                  :data2="qualitytDataA2"
                  :data3="qualitytDataA3"
                  :data4="qualitytDataA4"
                  :datax="qualitytDataAx"
                  :dataName="qualitytName"
                  :title="'一级'"
                  :max="10000"
                  :min="0"
                />
              </div>
            </el-card>
          </el-col>

          <el-col :span="8">
            <el-card shadow="hover" class="stat-card">
              <div class="tcm1-mid-mid-card2-graph common-div-card">
                <graph-bar-other
                  :data1="qualitytDataB1"
                  :data2="qualitytDataB2"
                  :data3="qualitytDataB3"
                  :data4="qualitytDataB4"
                  :datax="qualitytDataBx"
                  :dataName="qualitytName1"
                  :title="'二级'"
                  :max="10000"
                  :min="0"
                />
              </div>
            </el-card>
          </el-col>

          <el-col :span="8">
            <el-card shadow="hover" class="stat-card">
              <div class="tcm1-mid-mid-card2-graph common-div-card">
                <graph-bar-other
                  :data1="qualitytDataC1"
                  :data2="qualitytDataC2"
                  :data3="qualitytDataC3"
                  :data4="qualitytDataC4"
                  :datax="qualitytDataCx"
                  :dataName="qualitytName2"
                  :title="'三级'"
                  :max="10000"
                  :min="0"
                />
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="汽车板生产情况" name="carboard">
        <!-- <onecoldc ref="onecoldcRef" v-if="activeName === 'carboard'" /> -->
        <!-- 顶部标题 -->
        <el-row justify="center" class="header-row">
          <el-col :span="24" class="title">三冷运营区域质量日报</el-col>
        </el-row>
        <!-- 汽车板生产情况 表格-->
        <el-row :gutter="16" class="main-tables" v-if="activeName === 'carboard'">
          <el-col :span="24">
            <el-card shadow="hover" class="stat-card">
              <div class="card-title">汽车板生产情况</div>
              <!-- 时间筛选 -->
              <div class="filter-section">
                <el-date-picker
                  v-model="carDateRange"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  @change="handleCarDateChange"
                  class="date-picker"
                />
                <el-button type="primary" @click="handleCarQuery" :loading="tableLoading"> 查询 </el-button>
              </div>
              <el-table :data="CarData" border size="small" :row-class-name="carRowClassName">
                <el-table-column prop="type1" label="类型" align="center" />
                <el-table-column prop="type2" label="类型" align="center" />
                <el-table-column label="当日" align="center">
                  <el-table-column prop="day0" label="投料量（吨）" align="center">
                    <template #default="{ row }">{{ formatOverReduction(row.day0) }}</template>
                  </el-table-column>
                  <el-table-column prop="day1" label="产出量（吨）" align="center">
                    <template #default="{ row }">{{ formatOverReduction(row.day1) }}</template>
                  </el-table-column>
                  <el-table-column prop="day2" label="合格量（吨）" align="center">
                    <template #default="{ row }">{{ formatOverReduction(row.day2) }}</template>
                  </el-table-column>

                  <el-table-column prop="day3" label="内部降级量（吨）" align="center">
                    <template #default="{ row }">{{ formatOverReduction(row.day3) }}</template>
                  </el-table-column>
                  <el-table-column prop="day4" label="外部降级量（吨）" align="center">
                    <template #default="{ row }">{{ formatOverReduction(row.day4) }}</template>
                  </el-table-column>
                  <el-table-column prop="day5" label="综合合格率（%）" align="center">
                    <template #default="{ row }">{{ formatTargetIndicator(row.day5) }}</template>
                  </el-table-column>

                  <el-table-column prop="day6" label="内部合格率（%）" align="center">
                    <template #default="{ row }">{{ formatTargetIndicator(row.day6) }}</template>
                  </el-table-column>
                </el-table-column>

                <el-table-column label="累计" align="center">
                  <el-table-column prop="sum0" label="投料量（吨）" align="center" header-class-name="divider-left" class-name="divider-left">
                    <template #default="{ row }">{{ formatOverReduction(row.sum0) }}</template>
                  </el-table-column>
                  <el-table-column prop="sum1" label="产出量（吨）" align="center">
                    <template #default="{ row }">{{ formatOverReduction(row.sum1) }}</template>
                  </el-table-column>
                  <el-table-column prop="sum2" label="合格量（吨）" align="center">
                    <template #default="{ row }">{{ formatOverReduction(row.sum2) }}</template>
                  </el-table-column>

                  <el-table-column prop="sum3" label="内部降级量（吨）" align="center">
                    <template #default="{ row }">{{ formatOverReduction(row.sum3) }}</template>
                  </el-table-column>
                  <el-table-column prop="sum4" label="外部降级量（吨）" align="center">
                    <template #default="{ row }">{{ formatOverReduction(row.sum4) }}</template>
                  </el-table-column>
                  <el-table-column prop="sum5" label="综合合格率（%）" align="center">
                    <template #default="{ row }">{{ formatTargetIndicator(row.sum5) }}</template>
                  </el-table-column>

                  <el-table-column prop="sum6" label="内部合格率（%）" align="center">
                    <template #default="{ row }">{{ formatTargetIndicator(row.sum6) }}</template>
                  </el-table-column>
                </el-table-column>
              </el-table>
            </el-card>
          </el-col>
        </el-row>

        <!-- 汽车板生产情况  折线图 -->
        <el-row :gutter="16" class="sub-tables" v-if="activeName === 'carboard'">
          <el-col :span="24">
            <el-card class="tcm1-right-mid-card2" shadow="hover">
              <div style="width: 100%; height: 100%">
                <graph-line
                  :data1="CarData_Zhexiantu1"
                  :data2="CarData_Zhexiantu2"
                  :datax="CarData_Zhexiantux"
                  :data-name="CarData_Zhexiantuname"
                  :title="'汽车板合格率趋势（%）内/外板'"
                  :show-bar="false"
                />
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="原料质量情况" name="source">
        <!-- <onecoldd ref="onecolddRef" v-if="activeName === 'source'" /> -->
        <!-- 顶部标题 -->
        <el-row justify="center" class="header-row">
          <el-col :span="24" class="title">三冷运营区域质量日报</el-col>
        </el-row>
        <!-- 原料质量影响 表格-->
        <el-row :gutter="16" class="main-tables" align="center" v-if="activeName === 'source'">
          <el-col :span="24">
            <el-card shadow="hover" class="stat-card">
              <div class="card-title">原料质量影响</div>
              <!-- 时间筛选 -->
              <div class="filter-section">
                <el-date-picker
                  v-model="materialDateRange"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  @change="handleMaterialDateChange"
                  class="date-picker"
                />
                <el-button type="primary" @click="fetchQualitytData" :loading="tableLoading"> 查询 </el-button>
              </div>
              <el-table :data="qualitytData" border size="small">
                <el-table-column prop="unit" label="单元" align="center" />
                <el-table-column prop="type" label="类型" align="center" />
                <el-table-column label="当日(吨)" align="center">
                  <el-table-column prop="day0" label="板材炼钢" align="center" />
                  <el-table-column prop="day1" label="板材热轧" align="center" />
                  <el-table-column prop="day2" label="北营炼钢" align="center" />
                  <el-table-column prop="day3" label="北营热轧" align="center" />
                </el-table-column>
                <el-table-column label="累计(吨)" align="center">
                  <el-table-column prop="sum0" label="板材炼钢" align="center" />
                  <el-table-column prop="sum1" label="板材热轧" align="center" />
                  <el-table-column prop="sum2" label="北营炼钢" align="center" />
                  <el-table-column prop="sum3" label="北营热轧" align="center" />
                </el-table-column>
              </el-table>
            </el-card>
          </el-col>
        </el-row>

        <!-- 原料质量影响  饼状图 -->
        <el-row :gutter="16" class="sub-tables" v-if="activeName === 'source'">
          <el-col :span="12">
            <el-main style="height: 40vh">
              <div class="prodPie common-div-card">
                <div style="width: 100%; height: 100%">
                  <graph-pie :data="profitData" :title="'外部当日降级'" />
                </div>
              </div>
            </el-main>
          </el-col>

          <el-col :span="12">
            <el-main style="height: 40vh">
              <div class="prodPie common-div-card">
                <div style="width: 100%; height: 100%">
                  <graph-pie :data="profitData2" :title="'外部累计降级'" />
                </div>
              </div>
            </el-main>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup lang="ts">
  import { ref, reactive, onMounted, onBeforeMount } from 'vue';
  import { listApiqualityproblem } from '/@/api/report/quality/index';
  import GraphBarOther from '../components/GraphBarOther.vue';
  import GraphLine from '../components/GraphLine.vue';
  import GraphPie from '../components/GraphPie.vue';
  import type { TabsPaneContext, TabsInstance } from 'element-plus';

  const activeName = ref('main');
  const handleTabClick = (tab: TabsPaneContext) => {};
  const tabPosition = ref<TabsInstance['tabPosition']>('left');

  //主指标情况，表格数据
  const mainTargetData = ref<any>([]);

  //主指标情况 折线图
  const tcmELCCPKData1 = ref<any>([]);
  const tcmELCCPKData2 = ref<any>([]);
  const tcmELCCPKData3 = ref<any>([]);
  const tcmELCCPKDatax = ref<any>([]);
  const tcmELCCPKDataFx = ref<any>([]);
  const tcmELCCPKDataYx = ref<any>([]);
  const tcmELCCPKDataName1 = ref<any>([]); //合格率
  const tcmELCCPKDataName2 = ref<any>([]); //废次率

  //质量问题情况 表格数据
  const mainTargetData_quality = ref<any>([]);

  //质量问题情况 柱状图数据 A
  const qualitytDataA1 = ref<any>([]);
  const qualitytDataA2 = ref<any>([]);
  const qualitytDataA3 = ref<any>([]);
  const qualitytDataA4 = ref<any>([]);
  const qualitytDataAx = ref<any>([]);

  //质量问题情况 柱状图数据 B
  const qualitytDataB1 = ref<any>([]);
  const qualitytDataB2 = ref<any>([]);
  const qualitytDataB3 = ref<any>([]);
  const qualitytDataB4 = ref<any>([]);
  const qualitytDataBx = ref<any>([]);

  //质量问题情况 柱状图数据 C
  const qualitytDataC1 = ref<any>([]);
  const qualitytDataC2 = ref<any>([]);
  const qualitytDataC3 = ref<any>([]);
  const qualitytDataC4 = ref<any>([]);
  const qualitytDataCx = ref<any>([]);
  const qualitytName = ref<any>([]);
  const qualitytName1 = ref<any>([]);
  const qualitytName2 = ref<any>([]);

  //汽车板生产情况，表格数据
  const CarData = ref<any>([]);

  //汽车板生产情况 折线图
  const CarData_Zhexiantu1 = ref<any>([]);
  const CarData_Zhexiantu2 = ref<any>([]);
  const CarData_Zhexiantux = ref<any>([]);
  const CarData_Zhexiantuname = ref<any>(['内板合格率', '外板合格率']);

  //原料质量影响，表格数据
  const qualitytData = ref<any>([]);

  //原料质量影响，当日外部降级情况(吨)数据 折线图
  const profitData = ref<any>([]);
  //原料质量影响，当日外部降级情况(吨)数据 折线图
  const profitData2 = ref<any>([]);

  const tableLoading = ref(false);

  // 日期筛选相关状态
  const dateRange = ref<[string, string] | null>(null);
  const qualityDateRange = ref<[string, string] | null>(null);
  const carDateRange = ref<[string, string] | null>(null);
  const materialDateRange = ref<[string, string] | null>(null);

  onBeforeMount(() => {
    fetchMainLineData();
  });

  onBeforeMount(() => {
    fetchPlankLine();
  });

  onMounted(() => {
    fetchMainTargetData();
    fetchTableData();
    fetchCarData();
    fetchQualitytData();
    fetchQuestionBarData();
    fetchMaterialPie();
  });

  const fetchMainTargetData = async () => {
    try {
      tableLoading.value = true;
      const param = {
        dbegin: dateRange.value ? dateRange.value[0] : '',
        dend: dateRange.value ? dateRange.value[1] : '',
      };
      await listApiqualityproblem.mainRep(param).then((res) => {
        if (res.data.status != 2000) {
          throw new Error('数据获取失败：' + res.data.message);
        }
        mainTargetData.value = res.data.data;
      });
      tableLoading.value = false;
    } catch (error: any) {
      ElNotification({
        title: '数据获取失败',
        message: error.message ?? '',
        type: 'error',
        duration: 2000,
      });
    } finally {
      tableLoading.value = false;
    }
  };

  const fetchMaterialPie = async () => {
    try {
      const param = {
        dbegin: materialDateRange.value ? materialDateRange.value[0] : '',
        dend: materialDateRange.value ? materialDateRange.value[1] : '',
      };
      await listApiqualityproblem.materialPie(param).then((res) => {
        if (res.data.status != 2000) {
          throw new Error('数据获取失败：' + res.data.message);
        }

        profitData.value = res.data.data.pie1;
        profitData2.value = res.data.data.pie2;
      });
    } catch (error: any) {
      ElNotification({
        title: '数据获取失败',
        message: error.message ?? '',
        type: 'error',
        duration: 2000,
      });
    }
  };
  const fetchPlankLine = async () => {
    try {
      const param = {
        dbegin: carDateRange.value ? carDateRange.value[0] : '',
        dend: carDateRange.value ? carDateRange.value[1] : '',
      };

      await listApiqualityproblem.plankLine(param).then((res) => {
        if (res.data.status != 2000) {
          throw new Error('数据获取失败：' + res.data.message);
        }
        CarData_Zhexiantux.value = res.data.data.x;
        // 汽车板合格率趋势数据格式化
        if (res.data.data.data1 && Array.isArray(res.data.data.data1)) {
          CarData_Zhexiantu1.value = res.data.data.data1.map((val: any) => (val !== null && val !== undefined ? val.toFixed(2) : val));
        } else {
          CarData_Zhexiantu1.value = [];
        }

        if (res.data.data.data2 && Array.isArray(res.data.data.data2)) {
          CarData_Zhexiantu2.value = res.data.data.data2.map((val: any) => (val !== null && val !== undefined ? val.toFixed(2) : val));
        } else {
          CarData_Zhexiantu2.value = [];
        }

        console.log('汽车板合格率趋势数据:', {
          data1: CarData_Zhexiantu1.value,
          data2: CarData_Zhexiantu2.value,
          x: CarData_Zhexiantux.value,
        });
      });
    } catch (error: any) {
      ElNotification({
        title: '数据获取失败',
        message: error.message ?? '',
        type: 'error',
        duration: 2000,
      });
    }
  };

  const fetchQuestionBarData = async () => {
    try {
      const param = {
        dbegin: qualityDateRange.value ? qualityDateRange.value[0] : '',
        dend: qualityDateRange.value ? qualityDateRange.value[1] : '',
      };
      await listApiqualityproblem.questionBar(param).then((res) => {
        if (res.data.status != 2000) {
          throw new Error('数据获取失败：' + res.data.message);
        }

        qualitytDataA1.value.push(res.data.data.char1.dataArr1[0]);
        qualitytDataA1.value.push(res.data.data.char1.dataArr2[0]);
        qualitytDataA2.value.push(res.data.data.char1.dataArr1[1]);
        qualitytDataA2.value.push(res.data.data.char1.dataArr2[1]);
        qualitytDataA3.value.push(res.data.data.char1.dataArr1[2]);
        qualitytDataA3.value.push(res.data.data.char1.dataArr1[2]);
        qualitytDataA4.value.push(res.data.data.char1.dataArr1[3]);
        qualitytDataA4.value.push(res.data.data.char1.dataArr1[3]);
        qualitytDataAx.value = res.data.data.char1.x;
        qualitytName.value = res.data.data.char1.series;

        qualitytDataB1.value.push(res.data.data.char2.dataArr1[0]);
        qualitytDataB1.value.push(res.data.data.char2.dataArr2[0]);
        qualitytDataB2.value.push(res.data.data.char2.dataArr1[1]);
        qualitytDataB2.value.push(res.data.data.char2.dataArr2[1]);
        qualitytDataB3.value.push(res.data.data.char2.dataArr1[2]);
        qualitytDataB3.value.push(res.data.data.char2.dataArr2[2]);
        qualitytDataB4.value.push(res.data.data.char2.dataArr1[3]);
        qualitytDataB4.value.push(res.data.data.char2.dataArr2[3]);
        qualitytDataBx.value = res.data.data.char2.x;
        qualitytName1.value = res.data.data.char2.series;

        qualitytDataC1.value.push(res.data.data.char3.dataArr1[0]);
        qualitytDataC1.value.push(res.data.data.char3.dataArr2[0]);
        qualitytDataC2.value.push(res.data.data.char3.dataArr1[1]);
        qualitytDataC2.value.push(res.data.data.char3.dataArr2[1]);
        qualitytDataC3.value.push(res.data.data.char3.dataArr1[2]);
        qualitytDataC3.value.push(res.data.data.char3.dataArr2[2]);
        qualitytDataC4.value.push(res.data.data.char3.dataArr1[3]);
        qualitytDataC4.value.push(res.data.data.char3.dataArr2[3]);

        qualitytDataCx.value = res.data.data.char3.x;
        qualitytName2.value = res.data.data.char3.series;
      });
    } catch (error: any) {
      ElNotification({
        title: '数据获取失败',
        message: error.message ?? '',
        type: 'error',
        duration: 2000,
      });
    }
  };

  const fetchMainLineData = async () => {
    try {
      const param = {
        dbegin: dateRange.value ? dateRange.value[0] : '',
        dend: dateRange.value ? dateRange.value[1] : '',
      };
      await listApiqualityproblem.mainLine(param).then((res) => {
        if (res.data.status != 2000) {
          throw new Error('数据获取失败：' + res.data.message);
        }
        // 调试：输出完整的数据结构
        console.log('接口返回的完整数据:', res.data.data);
        // 原品种一次合格率趋势 - 乘以100保留2位小数
        tcmELCCPKDataYx.value = res.data.data.yuanpin.x;
        if (res.data.data.yuanpin.y && Array.isArray(res.data.data.yuanpin.y)) {
          console.log('原品种一次合格率趋势原始数据:', res.data.data.yuanpin.y);
          tcmELCCPKData1.value = res.data.data.yuanpin.y.map((val: any) =>
            val !== null && val !== undefined ? (parseFloat(val) * 100).toFixed(2) : val
          );
          console.log('原品种一次合格率趋势处理后数据:', tcmELCCPKData1.value);
        } else {
          console.warn('原品种一次合格率趋势数据格式错误或为空:', res.data.data.yuanpin);
          tcmELCCPKData1.value = [];
          tcmELCCPKDataYx.value = [];
        }

        // 废次降率趋势 - 乘以100保留2位小数
        tcmELCCPKDataFx.value = res.data.data.feici.x;
        // 检查数据是否存在且为数组
        if (res.data.data.feici.y && Array.isArray(res.data.data.feici.y)) {
          tcmELCCPKData2.value = res.data.data.feici.y.map((val: any) =>
            val !== null && val !== undefined ? (parseFloat(val) * 100).toFixed(2) : val
          );
        } else {
          console.warn('废次降率趋势数据格式错误或为空:', res.data.data.feici);
          tcmELCCPKData2.value = [];
          tcmELCCPKDataFx.value = [];
        }

        console.log(tcmELCCPKData2.value);

        // 封闭趋势 - 乘以100保留2位小数
        tcmELCCPKDatax.value = res.data.data.fengbi.x;
        if (res.data.data.fengbi.y && Array.isArray(res.data.data.fengbi.y)) {
          tcmELCCPKData3.value = res.data.data.fengbi.y.map((val: any) =>
            val !== null && val !== undefined ? (parseFloat(val) * 100).toFixed(2) : val
          );
        } else {
          console.warn('封闭趋势数据格式错误或为空:', res.data.data.fengbi);
          tcmELCCPKData3.value = [];
          tcmELCCPKDatax.value = [];
        }

        console.log(tcmELCCPKData3.value);
      });
    } catch (error: any) {
      ElNotification({
        title: '数据获取失败',
        message: error.message ?? '',
        type: 'error',
        duration: 2000,
      });
    }
  };

  // 处理日期变化
  const handleDateChange = (value: [string, string] | null) => {
    dateRange.value = value;
  };

  // 处理主体指标查询（同时更新表格和折线图）
  const handleMainTargetQuery = async () => {
    await Promise.all([fetchMainTargetData(), fetchMainLineData()]);
  };

  const handleQualityDateChange = (value: [string, string] | null) => {
    qualityDateRange.value = value;
  };

  const handleCarDateChange = (value: [string, string] | null) => {
    carDateRange.value = value;
  };

  // 处理汽车板查询（同时更新表格和折线图）
  const handleCarQuery = async () => {
    await Promise.all([fetchCarData(), fetchPlankLine()]);
  };

  const handleMaterialDateChange = (value: [string, string] | null) => {
    materialDateRange.value = value;
  };

  // 数据格式化函数
  const formatTargetIndicator = (value: any) => {
    if (value === null || value === undefined || value === '') return '';
    const num = parseFloat(value);
    if (isNaN(num)) return value;
    return (num * 100).toFixed(2);
  };

  const formatOverReduction = (value: any) => {
    if (value === null || value === undefined || value === '') return '';
    const num = parseFloat(value);
    if (isNaN(num)) return value;
    return num.toFixed(1);
  };

  const fetchTableData = async () => {
    try {
      tableLoading.value = true;
      const param = {
        dbegin: qualityDateRange.value ? qualityDateRange.value[0] : '',
        dend: qualityDateRange.value ? qualityDateRange.value[1] : '',
        area: '',
        belong: '',
        unit: '',
        pageIndex: 0,
        pageSize: 0,
      };
      await listApiqualityproblem.questionRep(param).then((res) => {
        if (res.data.status != 2000) {
          throw new Error('数据获取失败：' + res.data.message);
        }
        mainTargetData_quality.value = res.data.data;
      });
      tableLoading.value = false;
    } catch (error: any) {
      ElNotification({
        title: '数据获取失败',
        message: error.message ?? '',
        type: 'error',
        duration: 2000,
      });
    } finally {
      tableLoading.value = false;
    }
  };

  const fetchCarData = async () => {
    try {
      tableLoading.value = true;
      const param = {
        dbegin: carDateRange.value ? carDateRange.value[0] : '',
        dend: carDateRange.value ? carDateRange.value[1] : '',
      };
      await listApiqualityproblem.plankRep(param).then((res) => {
        if (res.data.status != 2000) {
          throw new Error('数据获取失败：' + res.data.message);
        }
        CarData.value = res.data.data;
      });
      tableLoading.value = false;
    } catch (error: any) {
      ElNotification({
        title: '数据获取失败',
        message: error.message ?? '',
        type: 'error',
        duration: 2000,
      });
    } finally {
      tableLoading.value = false;
    }
  };

  const fetchQualitytData = async () => {
    try {
      tableLoading.value = true;
      const param = {
        dbegin: materialDateRange.value ? materialDateRange.value[0] : '',
        dend: materialDateRange.value ? materialDateRange.value[1] : '',
      };
      await listApiqualityproblem.materialRep(param).then((res) => {
        if (res.data.status != 2000) {
          throw new Error('数据获取失败：' + res.data.message);
        }
        qualitytData.value = res.data.data;
      });
      tableLoading.value = false;
    } catch (error: any) {
      ElNotification({
        title: '数据获取失败',
        message: error.message ?? '',
        type: 'error',
        duration: 2000,
      });
    } finally {
      tableLoading.value = false;
    }
  };

  // 汽车板：行样式（突出合计）
  const carRowClassName = ({ row }: { row: any }) => {
    if (!row) return '';
    return (row.type2 && row.type2.includes('合计')) || (row.type1 && row.type1.includes('汽车板总计')) ? 'car-total-row' : '';
  };
</script>

<style lang="less" scoped>
  @border-radius: 8px;
  @primary-color: #2c69e8;
  @box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  @box-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.12);
  @border:1px solid #dcdfe6;

  .common-div-card {
    box-shadow: @box-shadow;
    transition: 0.3s;
    border-radius: @border-radius;
    border: @border;

    // 悬停状态
    &:hover {
      box-shadow: @box-shadow-hover;
    }
  }

  .prodPie {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
  }

  .tcm1-right-mid-card2 {
    width: 100%;
    height: 25vh;
    flex-wrap: nowrap;
    margin-top: 1vh;
    margin-bottom: 3vh;

    :deep(.el-card__body) {
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 100%;
    }
  }

  .qualityteam-container {
    padding: 18px 28px 0 0;
    background: #f6f8fa;
  }

  .header-row .title {
    font-size: 2rem;
    font-weight: bold;
    color: #009966;
    letter-spacing: 0.5em;
    text-align: center;
    margin-bottom: 28px;
    // margin-top: -1vh;
  }

  .card-title {
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 8px;
  }
  .stat-card {
    margin-bottom: 16px;
  }
  .device-issue-row {
    margin-bottom: 16px;
  }
  .device-issue-card {
    background: #fffbe6;
  }
  .device-issue-content {
    color: #333;
    font-size: 0.98rem;
    line-height: 1.7;
    margin-top: 8px;
  }
  .bottom-card {
    margin-top: 18px;
  }
  .search-bar {
    margin-bottom: 0;
  }
  .center-panel {
    width: 33.33%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: space-between;
  }
  .center-row {
    width: 100%;
    height: 50%;
  }
  .card-bj {
    background-image: url('/src/assets/images/cut331.png');
    height: 26px;
    padding-top: 5px;
    margin-bottom: 4px;
  }
  .tcm1-mid-mid-card2-graph {
    height: 25vh;
    width: 100%;
    margin-top: 1vh;
    box-shadow: @box-shadow;
    border-radius: @border-radius;
  }

  .tcm1-mid-mid-card1-graph {
    height: 20vh;
    width: 100%;
    margin-top: 10vh;
    box-shadow: @box-shadow;
    // border-radius: @border-radius;
  }

  .filter-section {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: @border-radius;
    border: @border;
  }

  .date-picker {
    width: 300px;
  }

  /* 汽车板：合计行突出显示 */
  :deep(.car-total-row) {
    background-color: #fff7e6 !important; /* 柔和高亮 */
    font-weight: 600;
  }

  /* 汽车板：当日与累计分组左侧添加明显分割线 */
  :deep(.el-table .divider-left) {
    border-left: 2px solid #c0c4cc !important;
  }
</style>
